<template>
  <div>
    业务类型：
    <el-select v-model="path" placeholder="预收冲应收" style="width: 120px;" @change="goto">
      <el-option value="WriteOff">
        预收冲应收
      </el-option>
      <el-option value="WriteOff2">
        预付冲应付
      </el-option>
      <el-option value="WriteOff3">
        应收冲应付
      </el-option>
      <el-option value="WriteOff4">
        应收转应收
      </el-option>
      <el-option value="WriteOff5">
        应付转应付
      </el-option>
    </el-select>
    客户：
    <el-input style="width: 150px;margin-left: 10px;margin-right: 20px;" placeholder="请输入客户编号" v-model="input"
      clearable>
    </el-input>

    <el-button slot="reference" style="margin-left:-20px;margin-right:10px"
      @click="dialogFormVisible = true">...</el-button>
    <el-dialog top="20px" title="" :visible.sync="dialogFormVisible">
      <el-select v-model="value" placeholder="类别">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="input" placeholder="请输入内容" style="width: 200px;margin-left: 20px;"></el-input>
      <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
      <el-button type="primary" style="margin-left: 20px">查询</el-button>
      <el-table :data="gridData">

        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column width="100" property="name" label="类别"></el-table-column>
        <el-table-column width="100" property="address" label="编号"></el-table-column>
        <el-table-column width="300" property="address" label="名称"></el-table-column>
        <el-table-column width="100" property="address" label="联系人"></el-table-column>
        <el-table-column width="100" property="address" label="手机"></el-table-column>
        <el-table-column width="100" property="address" label="备注"></el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    业务员：
    <el-select v-model="value" placeholder="业务员" style="width: 100px;">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <span class="demonstration" style="margin-left: 20px;">单据日期:</span>
    <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"
      style="width: 120px;">
    </el-date-picker>
    <div style="float: right;">
      <i class="el-icon-paperclip" style="color: blue;margin-left: 40px"></i>
      <sapn style="color: blue;">上传附件</sapn>
      <span style="margin-left: 10px;">单据编号:</span>
      <el-input style="width: 120px;margin-left: 10px;margin-right: 20px;" placeholder="" v-model="input" clearable
        disabled>
      </el-input>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-edit"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>SKDYYYYMMDD</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <hr style="margin-top: 10px">
    <div style="margin-top: 10px;float: right">
      <el-button>保存</el-button><el-button type="primary">提交</el-button>
    </div>
    <div style="clear: both;"></div>
    <div style="float:right;margin-top: 10px;margin-left: 200px"> <el-button @click="choose1 = true">选择预收单据</el-button>
    </div>
    <div style="clear: both;"></div>
    <el-dialog top="20px" title="" :visible.sync="choose1" style="margin-top: 10px">
      <div class="block">
        <span class="demonstration">日期：</span>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width: 200px">
        </el-date-picker>
        备注：
        <el-input style="width: 100px; margin-left: 10px; margin-right: 20px" placeholder="备注" v-model="input"
          clearable>
        </el-input>
        源单编号：
        <el-input style="width: 110px; margin-left: 10px; margin-right: 20px" placeholder="源单编号：" v-model="input"
          clearable>
        </el-input>
        <el-button type="primary" style="margin-left: 20px">查询</el-button>
      </div>

      <el-table :data="gridData">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="源单编号" width="120">
        </el-table-column>
        <el-table-column prop="address" label="业务类别" width="120">
        </el-table-column>
        <el-table-column fixed prop="name" label="单据日期" width="150">
        </el-table-column>
        <el-table-column prop="address" label="单据金额" width="120">
        </el-table-column>
        <el-table-column prop="name" label="已核销金额" width="120">
        </el-table-column>
        <el-table-column prop="address" label="未核销金额" width="120">
        </el-table-column>

        <el-table-column prop="address" label="业务员" width="120">
        </el-table-column>
        <el-table-column prop="address" label="备注" width="120">
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="choose = false">取 消</el-button>
        <el-button type="primary" @click="choose = false">确 定</el-button>
      </div>
    </el-dialog>
    <Top style="margin-top:0px" />
    <div style="float:right;margin-top: 20px;"> <el-button
        @click="choose = true">选择应收单据</el-button><el-button>自动核销</el-button></div>
    <el-dialog top="20px" title="" :visible.sync="choose">
      <div class="block">
        <span class="demonstration">日期：</span>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width: 200px">
        </el-date-picker>
        备注：
        <el-input style="width: 100px; margin-left: 10px; margin-right: 20px" placeholder="备注" v-model="input"
          clearable>
        </el-input>
        源单编号：
        <el-input style="width: 110px; margin-left: 10px; margin-right: 20px" placeholder="源单编号：" v-model="input"
          clearable>
        </el-input>
        <el-button type="primary" style="margin-left: 20px">查询</el-button>
      </div>

      <el-table :data="gridData">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="源单编号" width="120">
        </el-table-column>
        <el-table-column prop="address" label="业务类别" width="120">
        </el-table-column>
        <el-table-column fixed prop="name" label="单据日期" width="150">
        </el-table-column>
        <el-table-column prop="address" label="单据金额" width="120">
        </el-table-column>
        <el-table-column prop="name" label="已核销金额" width="120">
        </el-table-column>
        <el-table-column prop="address" label="未核销金额" width="120">
        </el-table-column>

        <el-table-column prop="address" label="业务员" width="120">
        </el-table-column>
        <el-table-column prop="address" label="备注" width="120">
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="choose = false">取 消</el-button>
        <el-button type="primary" @click="choose = false">确 定</el-button>
      </div>
    </el-dialog>
    <Top style="margin-top:40px" />
    <el-input type="textarea" :rows="2" placeholder="暂无备注信息" v-model="textarea" style="width: 100%;line-height: 20px;">

    </el-input>
    <div style="float:right;margin-right: 20px;margin-top: 10px;">
      <el-button @click="goto('WriteOffHistory')">历史单据</el-button><el-button>操作日志</el-button>
    </div>

  </div>

</template>

<script>
import Top from './Top.vue';

export default {
  name: "WriteOff",
  components:
  {
    Top
  },
  data() {
    return {
      dialogFormVisible: false,
      choose: false,
      choose1: false,
      path: "",
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: '200333'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: '200333'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: '200333'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: '200333'
      }],

      value1: '',
      value2: '',
    };
  },
  methods: {
    goto() {
      this.$router.push(this.path)
    },
    goto(to) {
      this.$router.push(to)
    }
  }

}
</script>

<style></style>